<template>
  <div class="container">
    <div class="dowebok">
      <div class="logo"></div>
      <div class="form-item">
        <i class="el-icon-s-custom infoIcon"></i>
        <input
          v-model="username"
          type="text"
          autocomplete="off"
          placeholder="账号"
        />
      </div>
      <div class="form-item">
        <i class="el-icon-lock infoIcon"></i>

        <input
          v-model="password"
          type="password"
          autocomplete="off"
          placeholder="密码"
        />
      </div>
      <div class="form-item">
        <button @click="goLogin" @keyup.enter="goLogin">登 录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { } from "@/api/apis";
import { getToken, setToken } from "@/api/auth";

export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  created() {
    this.enterSearch();
  },
  methods: {
  
    goLogin() {
      // console.log(this.username, this.password);
      if (this.username == "admin" && this.password == "szpt@666") {
          this.$message({
            type: "success",
            message: "登录成功!",
          });
          setTimeout(() => {
            this.$router.replace({ path: "/layout" });
          }, 300);
        } else {
          this.$message({
            type: "error",
            message: "账号密码错误!请重新输入",
          });
        }
      
    },  
    enterSearch() {
      document.onkeydown = (e) => {
        // console.log("url", e.target.baseURI.match());
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (e.keyCode === 13) {
          //回车后执行搜索方法
          this.goLogin();
        }
      };
    },
  },
};
</script>

<style scoped >
.container {
  width: 100vw;
  height: 100vh;
  background: url(../../assets/image/bgi.jpg) 50% 50% no-repeat;
  background-size: 100%;
}
.dowebok {
  background-color: #ffffff;
  position: absolute;
  left: 60%;
  top: 50%;
  width: 440px;
  height: 500px;
  margin: -280px 0 0 0px;
  /* border: 1px solid #fff; */
  border-radius: 20px;
  overflow: hidden;
  /* background: url(../../assets/image/loginbmg.jpg) no-repeat; */
}
.logo {
  width: 288px;
  height: 62px;
  margin: 50px auto 50px;
  background: url(../../assets/image/logo.png) 0 0 no-repeat;
  background-size: 100%;
}
.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.infoIcon {
  position: absolute;
  top: 14px;
  left: 24px;
  color: #ccc;
  font-size: 18px;
}
.form-item input {
  width: 360px;
  height: 48px;
  padding-left: 70px;
  border: 1px solid #ccc;
  border-radius: 25px;
  font-size: 18px;
  color: #343434;
  background-color: transparent;
  outline: none;
}
.form-item button {
  width: 360px;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  outline: none;
  cursor: pointer;
  background-color: #3393d3;
}
.dowebok ::-webkit-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #343434;
}
.dowebok :-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #343434;
}
.dowebok ::-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #343434;
}
.dowebok :-ms-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #343434;
}

@media screen and (max-width: 500px) {
  * {
    box-sizing: border-box;
  }
  .dowebok {
    position: static;
    width: auto;
    height: auto;
    margin: 0 30px;
    border: 0;
    border-radius: 0;
  }
  .logo {
    margin: 50px auto;
  }
  .form-item {
    width: auto;
  }
  .form-item input,
  .form-item button {
    width: 100%;
  }
}
</style>